<template>
	<view class="knapsack">
		<comHead :title="$t('index.bb')" :isLeft="true" :isRight="false" rType="knapsack"></comHead>
		<view class="tabs">
			<view class="item" v-for="(item,index) in arr" @click="changeTabs(index)">
				<text :class="active==index?'on':''">{{item}}</text>
			</view>
		</view>
		<view class="knapsackNav">
			<image class="dhm" src="https://siha.vxmeng.com/static/index/dhm.png" mode="widthFix"></image>
			<text>{{$t('index.dhm')}}</text>
			<image src="https://siha.vxmeng.com/static/my/r.png" mode="widthFix"></image>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in 5">
				<view class="l">
					<image src="https://siha.vxmeng.com/static/index/lw.png" mode="widthFix"></image>
					<view class="text">
						<text>{{$t('index.xj')}}</text>
						<text>{{$t('index.gwczsydjs')}}</text>
					</view>
				</view>
				<view class="r">
					<view class="num" v-if="active==1">
						<text>×</text>
						<text>4</text>
					</view>
					<view class="btn">
						<text>{{$t('index.ljsy')}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:[this.$t('index.zhuangshi'),this.$t('index.dj')],
				active:1
			}
		},
		methods: {
			changeTabs(index){
				this.active = index
			}
		}
	}
</script>

<style lang="less" scoped>
	.knapsack{
		.knapsackNav {
			// width: 160rpx;
			height: 60rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 24rpx 0px 0px 24rpx;
			color: #D8D8D8;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 20rpx;
			margin-top: 20rpx;
			text {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				-webkit-line-clamp: 1;
				 text-overflow: ellipsis;
			}
			image {
				width: 40rpx;
			}
			.dhm{
				margin-right: 20rpx;
			}
		}
		.tabs{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.item{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50%;
				text{
					display: inline-flex;
					color: #D8D8D8;
					font-size: 28rpx;
					border-bottom: 4rpx solid rgba(#000,0);
					padding: 10rpx 0;
					&.on{
						color: #fff;
						font-size: 32rpx;
						border-bottom: 4rpx solid #D8D8D8;
					}
				}
			}
		}
		.list{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.item{
				width: 690rpx;
				padding: 20rpx;
				box-sizing: border-box;
				background: linear-gradient(137deg, rgba(#222222,0.65) 0%, rgba(30,36,44,0.65) 100%);
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;
				.l{
					display: flex;
					align-items: center;
					image{
						width: 112rpx;
					}
					.text{
						color: #fff;
						font-size: 32rpx;
						display: flex;
						flex-direction: column;
						width: 350rpx;
						margin-left: 20rpx;
						text{
							&:nth-child(2){
								color: #999999;
								font-size: 24rpx;
								margin-top: 20rpx;
							}
						}
					}
				}
				.r{
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					.num{
						color: #FFD673;
						font-size: 32rpx;
					}
					.btn{
						width: 120rpx;
						height: 48rpx;
						background: linear-gradient(90deg, #5F58FD 0%, #62B6FC 100%);
						border-radius: 28rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 24rpx;
						margin-top: 20rpx;
					}
				}
			}
		}
	}
</style>
